<template>
    <div class="shop">
        <div class="shophed">
           <ul class="mui-table-view">
               <li class="mui-table-view-cell mui-checkbox mui-left" v-for="ite in this.$store.state.shopList" :key="ite.CarImg">
					<input name="checkbox" type="checkbox" class="checkbox" :checked="ite.carBool" @click="$store.commit('setBool',ite.Carname)">
                    <div class="shopImg">
                        <img :src="ite.CarImg" alt="">
                    </div>
                    <div class="shophed-right">
                        <p>{{ ite.Carname }}</p>
                        <span>￥{{ ite.Carjg }}</span>
                        <div class="mui-numbox">
                            <button class="mui-btn mui-numbox-btn-minus" type="button" @click="$store.commit('redcar',ite.Carname)">-</button>
                            <input class="mui-numbox-input" type="number" :value="ite.Carnum" readonly/>
                            <button class="mui-btn mui-numbox-btn-plus" type="button" @click="$store.commit('addcar',ite.Carname)">+</button>
                        </div>
                        <a href="#" @click.prevent="$store.commit('delcar',ite.Carname)">删除</a>
                    </div>
				</li>
           </ul>
        </div>
        <div class="shopsett">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <span>合计:</span>
                    <span class="seetq">￥{{ $store.state.seet }}</span>
                    <nut-button @click="shopgoorde">去结算</nut-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "shop",
    data() {
        return{
        }
    },
    methods: {
        shopgoorde(){
            this.$store.commit("infoshoporde",this.$store.state.shopList)
            if(this.$store.state.orde !== undefined && this.$store.state.orde.length != 0){
                if(this.$store.state.orde !== null){
                    this.$router.push('/shoy/shop/orde')
                }
            }
        }
    },
    created(){
        this.$store.commit('seetcar')
    }
}
</script>

<style scoped>
    .shophed{
        width: 100%;
    }
    .shophed .mui-table-view .mui-table-view-cell{
        width: 100%;
        height: 100px;
    }
    .shophed .checkbox{
        top: 33px !important;
    }
    .shophed .shopImg{
        display: inline-block;
        width: 20%;
        height: 80px;
    }
    .shophed .shopImg img{
        width: 100%;
        height: 100%;
    }
    .shophed-right{
        width: 77%;
        height: 80px;
        float: right;
    }
    .shophed-right p{
        font-size: 15px;
        color: black;
        margin: 10px;
    }
    .shophed-right span{
        font-size: 15px;
        color: red;
    } 
    .shophed-right .mui-numbox{
        margin-left: 3px;
        margin-right: 3px;
    }

    .shopsett{
        position: fixed;
        top: 569px;
        left: 0;
        right: 0;
        bottom: 50px;
    }
    .shopsett ul li span{
        display: inline-block;
        margin-top: 5px;
        margin-right: 10px;
    }
    .seetq{
        font-size: 16px;
        font-weight: 200 !important;
        color: red !important;
    }
    .shopsett ul li button{
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
    }
</style>
